<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回到顶部示例</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            /* 创建足够长的内容使页面可滚动 */
            height: 2000px;
            background: linear-gradient(to bottom, #f5f7fa, #c3cfe2);
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin: 40px 0;
            color: #333;
        }

        p {
            margin-bottom: 20px;
            color: #555;
        }

        /* 回到顶部按钮样式 */
        .back-to-top {
            /* 固定定位在右下角 */
            position: fixed;
            right: 30px;
            bottom: 30px;

            /* 初始状态隐藏 */
            opacity: 0;
            visibility: hidden;

            /* 按钮样式 */
            width: 50px;
            height: 50px;
            background-color: #3498db;
            color: white;
            border-radius: 50%;
            border: none;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

            /* 过渡动画效果 */
            transition: all 0.3s ease-in-out;

            /* 使用flex布局使图标居中 */
            display: flex;
            justify-content: center;
            align-items: center;

            /* 箭头图标样式 */
            font-size: 20px;
        }

        /* 鼠标悬停效果 */
        .back-to-top:hover {
            background-color: #2980b9;
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* 按钮显示时的样式 */
        .back-to-top.show {
            opacity: 1;
            visibility: visible;
        }

        /* 响应式设计 - 在小屏幕上调整按钮大小 */
        @media (max-width: 768px) {
            .back-to-top {
                width: 40px;
                height: 40px;
                right: 20px;
                bottom: 20px;
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
<h1>回到顶部按钮示例</h1>

<p>向下滚动页面，当滚动超过一定距离时，右下角会出现"回到顶部"按钮。</p>

<!-- 更多内容用于使页面可滚动 -->
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>

<!-- 回到顶部按钮 -->
<button class="back-to-top" aria-label="回到顶部">↑</button>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取回到顶部按钮元素
        const backToTopButton = document.querySelector('.back-to-top');

        // 滚动事件监听器
        window.addEventListener('scroll', function() {
            // 当用户滚动超过300像素时显示按钮，否则隐藏
            if (window.pageYOffset > 300) {
                backToTopButton.classList.add('show');
            } else {
                backToTopButton.classList.remove('show');
            }
        });

        // 点击事件 - 平滑滚动到顶部
        // 另一种实现方式 - 使用CSS平滑滚动（现代浏览器支持）
        backToTopButton.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    });
</script>
</body>
</html>